﻿@model Bordspil.Models.GameViewModel

@{
    ViewBag.Title = "SetCards";
    Layout = "~/Views/Shared/_LayoutForLoggedIn.cshtml";
}

<h2 id="smu">@Model.gameI.name</h2>

<div id="pairGameContent">
    <div id="pairGameWindow">
        @foreach (var x in Model.deck)
        { 
            <div class="cardSlots">   
                <div class="cardBack" id="@x.ID">
                    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRm9Ze_AJ3G7VHaTihAwThXJY3n-96iiszZsDaQVI472Llkia8p" />
                </div>   
                <div class="cardFront">
                    <img id="f @x.ID c" src="@x.urlToCard" />
                </div>         
            </div>
        }
    </div>
    <div id="pairGameSideWindow">
        <p>Spilari 1:</p>
        <p>Spilari 2:</p>

        <div id="pairGameChat">
            <ul id="pairGameChatText">
                <li>Hér geturu talað við hinn gaurinn</li>
                <li id="pairGameStartChat"></li>
                <li id="halda"></li>
            </ul>
            <input id="pairGameChatbox" type="text" placeholder="Say something!!" />
            <input id="pairGameChatBUtton"type="button" value="Senda"/>
        </div>
    </div>
</div>

<script>
    $(function ()
    {
        var group = '@(Model.gameI.ID)';
        var hub = $.connection.gameHub;
        var scrollHeight = 20;
         
        hub.client.hideCards = function (id1, id2)
        {
            $("#" + id1).show("done");
            $("#" + id2).show("done");
        };
    
        hub.client.alertMe = function (smu)
        {
            alert(smu);
        };

        hub.client.setPoint = function ()
        {
            alert("one point for you");
        };

        hub.client.cardClicked = function (cardID)
        {
            $("#" + cardID).hide(); 
        };

        /*------------chat--------------*/
        hub.client.sendMessageTo = function (message)
        {
            $("#pairGameStartChat").before("<li>" + message + "</li>");
            scrollHeight = scrollHeight + 50;
            $("#pairGameChatText").animate({ scrollTop: scrollHeight }, 'normal');
        };

        $.connection.hub.start().done(function ()
        {
            hub.server.join(group);
          
            $(".cardBack").click(function ()
            {
                var id = $(this).attr("id");
                hub.server.clickCard(group, id);              
            });


            /*------------chat--------------*/
            $("#pairGameChatBUtton").click(function ()
            {
                hub.server.sendMessage(group, $("#pairGameChatbox").val());
                $("#pairGameStartChat").before('<li>' + $("#pairGameChatbox").val() + '</li>');
                scrollHeight = scrollHeight + 50;
                $("#pairGameChatText").animate({scrollTop: scrollHeight}, 'normal');
            });
        });
    });
</script>

<script>
    $("#smu").click(function () {
        $(".cardBack").show();
    });
</script>


